<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <!-- 文章状态选择-->
      <el-form-item label="文章状态">
        <el-select v-model="state" placeholder="请选择文章状态">
          <el-option
            v-for="item in options01"
            :key="item.state"
            :label="item.label"
            :value="item.state"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科目">
        <!-- 文章科目选择-->
        <el-select v-model="type" placeholder="请选择所属科目">
          <el-option
            v-for="item in options02"
            :key="item.type"
            :label="item.label"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 文章名称查询-->
      <el-form-item label="文章名称">
        <el-input
          @keyup.enter.native="selectByIf()"
          style="width: 240px; height: 100px"
          placeholder="文章名称"
          v-model="article_name"
        >
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="findByPage()"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%;margin-top:-6.7%">
      <el-table-column
        label="文章名称"
        width="180"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.article_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="作者" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.writer }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="所属科目" width="150" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{ subjectType(scope.row.type) }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="上传时间" width="180" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{
              new Date(scope.row.upload_time).toLocaleString()
            }}</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态" width="120" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">
              {{ stateType(scope.row.state) }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        show-overflow-tooltip
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            lock-scroll
            @click.native.prevent="
              check(scope.row.id, scope.row.article_name, scope.row.content)
            "
          >
            查看
          </el-button>
          <el-button size="mini" @click="pass(scope.row.id)">通过</el-button>
          <el-button size="mini" @click="noPass(scope.row.id)"
            >不通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 点击查看详情的弹出框 -->
    <el-dialog title="文章详情" :visible.sync="dialogVisible" width="70%">
      <h4>文章名称:</h4>
      <span>{{ name }}</span>
      <el-divider></el-divider>
      <h4>文章内容</h4>
      <span>{{ content }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 分页组件 -->
    <el-pagination
      @next-click="next"
      @prev-click="prev"
      :current-page="currentPage"
      :page-sizes="[8]"
      :page-size="size"
      layout="total, sizes, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      selectArticle: {},
      currentPage: 1, //当前页
      page: 1,
      total: 0, //总条数
      totalPage: 0, //总页数
      size: 8, //每页大小
      tableData: [],
      dialogVisible: false,

      id: "",
      name: "",
      content: "",

      options01: [
        {
          state: "4",
          label: "全部文章"
        },
        {
          state: "0",
          label: "审核中"
        },
        {
          state: "1",
          label: "已通过"
        },
        {
          state: "2",
          label: "未通过"
        }
      ],
      state: "",

      options02: [
        {
          type: "10",
          label: "所有科目"
        },
        {
          type: "1",
          label: "语文"
        },
        {
          type: "2",
          label: "数学"
        },
        {
          type: "3",
          label: "英语"
        },
        {
          type: "4",
          label: "政治"
        },
        {
          type: "5",
          label: "历史"
        },
        {
          type: "6",
          label: "地理"
        },
        {
          type: "7",
          label: "物理"
        },
        {
          type: "8",
          label: "化学"
        },
        {
          type: "9",
          label: "生物"
        }
      ],
      type: "",

      article_name: "",

      type_subject: [
        "语文",
        "数学",
        "英语",
        "政治",
        "历史",
        "生物",
        "物理",
        "化学",
        "生物"
      ],
      type_state: ["审核中", "已通过", "未通过"]
    };
  },
  methods: {
    //审核通过
    pass(id) {
      this.id = id;
      axios
        .get(commons.baseUrl + "gradedean/Onestate?id=" + this.id)
        .then(resp => {
          console.log(resp);
          this.$message(resp.data.message);
        });
    },
    //审核不通过
    noPass(id) {
      this.id = id;
      axios
        .get(commons.baseUrl + "gradedean/Twostate?id=" + this.id)
        .then(resp => {
          console.log(resp);
          this.$message(resp.data.message);
        });
    },

    //查看
    check(id, article_name, content) {
      this.dialogVisible = true;
      this.id = id;
      this.name = article_name;
      this.content = content;
    },

    //科目
    subjectType(type) {
      return this.type_subject[type - 1];
    },
    //状态
    stateType(state) {
      return this.type_state[state];
    },

    //分页
    findByPage() {
      if (this.type == "") {
        this.selectArticle.type = 10;
      } else {
        this.selectArticle.type = this.type;
      }
      if (this.state == "") {
        this.selectArticle.state = 4;
      } else {
        this.selectArticle.state = this.state;
      }
      this.selectArticle.page = this.currentPage;
      this.selectArticle.size = this.size;
      this.selectArticle.article_name = this.article_name;
      axios
        .post(commons.baseUrl + "gradedean/allArticle", this.selectArticle, {
          headers: { "Content-Type": "application/JSON" }
        })
        .then(res => {
          this.tableData = res.data.datas;
          console.log(res);
          this.total = res.data.total;
          this.totalPage = res.data.totalPage;
          this.currentPage = res.data.currentPage;
          this.size = res.data.size;
          this.allData = res.data.datas;
        });
    },

    //下一页
    next() {
      this.currentPage = this.currentPage + 1;
      this.findByPage();
    },

    //上一页
    prev() {
      this.currentPage = this.currentPage - 1;
      this.findByPage();
    }
  },
  mounted() {
    //axios  get请求
    //调用方法获取第一页数据
    this.findByPage();
  },
  computed: {}
};
</script>
<style scoped></style>
